<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>渐变色和阴影</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')
  ctx.shadowColor="rgba(0,0,0,0.75)"
  ctx.shadowOffsetX = 5
  ctx.shadowOffsetY =5
  ctx.shadowBlur = 5
  ctx.lineWidth = 5
  ctx.strokeRect(0, 0, 50, 50)
  ctx.beginPath()
  const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height)
  gradient.addColorStop(0, 'red')
  gradient.addColorStop(1, 'blue')
  ctx.fillStyle = gradient
  ctx.rect(100, 0, 200, 200)
  drawRect(ctx,175,75,50,50,true)
  ctx.fill()

  function drawRect(ctx,x, y, w, h){
    ctx.moveTo(x,y)
    ctx.lineTo(x,y+h)
    ctx.lineTo(x+w,y+h)
    ctx.lineTo(x+w,y)
    ctx.closePath()
  }
  // function rect(x,y,w,h,direction) {
  //   if(direction){//CCW
  //     ctx.moveTo(x,y);
  //     ctx.lineTo(x,y+h);
  //     ctx.lineTo(x+w,y+h);
  //     ctx.lineTo(x+w,y);
  //     ctx.closePath();
  //   }else{
  //     ctx.moveTo(x,y);
  //     ctx.lineTo(x + w, y);
  //     ctx.lineTo(x + w, y + h);
  //     ctx.lineTo(x, y + h);
  //     ctx.closePath();
  //   }
  // }
</script>
</body>
</html>